<!-- author:王丹
     describe:用于学生新增请假页面
     update-time：2022-04-27 15：50；2022-05-02 15：44
     修改人：彭心愉
 -->
<template>
  <div class="backGroud2">
    <!-- 步骤条 -->
    <div class="headerImg">
      <img src="@/assets/imgl/writ.png" alt="" />
      <img src="@/assets/imgl/teach1.png" alt="" />
      <img src="@/assets/imgl/ok1.png" alt="" />
    </div>
    <div class="topBox"></div>
    <hr />

    <!-- 学生信息框 -->
    <span>学生填报</span> <span id="span">教师批审</span> <span>请假详情</span>

    <div class="inputBox">
      姓名<input type="text" /> 班级<input type="text" /> 院系<input
        type="text"
      />
      学号<input type="text" /> 辅导员<input type="text" /> 专业
      <input type="text" />
    </div>

    <!-- 输入框 -->
    <div class="blockWork">
      <el-cascader :options="Jobtype" placeholder="请假原因" />
    </div>
    <div class="demo-date-picker">
      <div class="block">
        <el-date-picker
          v-model="value"
          type="daterange"
          start-placeholder="Start date"
          end-placeholder="End date"
          :default-time="defaultTime"
        />
      </div>
    </div>
    <div class="selctBtn">
      <el-button type="primary" color="#3E94AD" :icon="Paperclip"
        >上传附件</el-button
      >
    </div>

    <el-input
      class="text"
      v-model="textarea"
      :rows="6"
      type="textarea"
      placeholder="Please input"
    />
    <div class="okBtn">
      <el-button type="primary" color="#3E94AD">确认提交</el-button>
      <el-button @click="prePage">取消</el-button>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { Paperclip } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
export default {
  name: "StudentAdd",
  setup() {
    const textarea = ref("");
    const value = ref("");
    const defaultTime = ref([
      new Date(2000, 1, 1, 0, 0, 0),
      new Date(2000, 2, 1, 23, 59, 59),
    ]);
    const Jobtype = [
      {
        value: "consistency",
        label: "事假",
      },
      {
        value: "feedback",
        label: "病假",
      },
    ];
    const options = [
      {
        value: "consistency",
        label: "未通过",
      },
      {
        value: "feedback",
        label: "通过",
      },
    ];
    const router = useRouter()
    
    // 退出增加页面，返回显示页
    function prePage() {
      router.go(-1)
    }
    return {
      textarea,
      value,
      defaultTime,
      Paperclip,
      Jobtype,
      options,
      prePage
    };
  },
};
</script>

<style scoped lang="less">
.backGroud2 {
  margin-left: 50px;
  margin-top: 90px;
  width: 1200px;
  height: 540px;
  background-color: rgb(194, 218, 226);
  border-radius: 30px;
}
.headerImg {
  margin-left: 200px;
  margin-top: 15px;
  display: inline-block;
  img {
    width: 50px;
    height: 50px;

    &:nth-child(2) {
      margin-left: 300px;
      margin-right: 295px;
    }
  }
}
span {
  display: inline-block;
  margin-left: 180px;
  margin-right: 100px;
  margin-top: 20px;
  font-size: 18px;
  margin-bottom: 20px;
}

.topBox {
  width: 200px;
  height: 10px;
  background-color: #3e94ad;
  border-radius: 20px;
  margin-left: 100px;
}
.inputBox {
  width: 1000px;
  height: 40px;
  background-color: #d8e7ed;
  border: 3px solid #f6f9fb;
  text-align: center;
  margin-left: 100px;
 input {
    margin: 5px;
    width: 110px;
    height: 30px;
    border: 0;
    background-color: #d8e7ed;
  }
}
/* 时间 */
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  /* padding: 30px 0; */
  margin-top: -33px;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.text {
  width: 1010px;
  margin-top: 20px;
  margin-left: 100px;
}
.selctBtn {
  /* position:absolute; */
  margin-left: 830px;
  margin-top: -33px;
}
.blockWork {
  /* position: absolute; */
  margin-left: 100px;
  margin-top: 10px;
}
.okBtn {
  margin-left: 500px;
  margin-top: 10px;
}
</style>